<!--
 * @Author: 筱洛 3259871097@qq.com
 * @Date: 2025-04-09 17:01:37
 * @LastEditors: 筱洛 3259871097@qq.com
 * @LastEditTime: 2025-04-17 09:56:39
 * @FilePath: \Exam system\src\views\StatCard.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="stat-card" :style="{ backgroundColor: color }">
      <i :class="`el-icon-${icon}`"></i>
      <div class="content">
        <h4>{{ title }}</h4>
        <p>{{ value }}</p>
      </div>
    </div>
  </template>
  
  <script setup>
  import { defineProps } from 'vue'
  
  const props = defineProps({
    title: {
      type: String,
      required: true
    },
    value: {
      type: [Number, String],
      required: true
    },
    icon: {
      type: String,
      required: true
    },
    color: {
      type: String,
      default: '#409EFF'
    }
  })
  </script>
  
  <style scoped>
  .stat-card {
    padding: 20px;
    border-radius: 8px;
    color: white;
    display: flex;
    align-items: center;
  }
  
  .stat-card i {
    font-size: 32px;
    margin-right: 20px;
  }
  
  .stat-card .content h4 {
    margin: 0;
    font-size: 16px;
    font-weight: normal;
  }
  
  .stat-card .content p {
    margin: 0;
    font-size: 24px;
    font-weight: bold;
  }
  </style>